// 工作追踪
<template>
  <div class="relative-box padding-left-right-10">
    <option-list ref="option" @refresh="refresh"></option-list>
    <template v-if="list.length > 0">
      <work-item v-for="item in list" :key="item.primaryKey" class="border-line" :titlePointer="true" @getInfo="getInfo" :canClick="true" :model="item" :isLeader="isLeader" :isShowImg="false"></work-item>
    </template>
    <el-empty class="padding-top-100" v-else description="暂无数据"></el-empty>

    <Pagination v-if="total > list.length" @change="pageChange" :total="total" paginationLayout="total, prev, pager, next" />
    <work-info ref="workInfo" :isLeader="isLeader" @updateWork="updateWork"></work-info>

    <add-work ref="work" @refresh="refresh" :isLeader="isLeader"></add-work>
  </div>
</template>
<script>
  import addWork from './components/addWork.vue';
  import workInfo from './workInfo.vue';
  import workItem from './components/workItem.vue';
  import { apiWorkList } from '../../api/workTrace';
  import merge from 'webpack-merge';
  import optionList from './components/optionList';
  import workTrace from '../../mixin/workTrace';

  export default {
    mixins: [workTrace],

    data() {
      return {
        svgLeft: 0,
        svgTop: 0,
        list: [],
        total: 0,
        currentPage: 1,
        pageSize: 10,
        addWorkBtnShow: true,
        systemType:localStorage.getItem('systemType'),
        isLeader: this.systemType == 'assetManagement' || this.systemType == 'businessBuildingOperate' ? true : false,
      };
    },

    mounted() {
      this.hasInfoKeyDo();
      this.getDataSource();
    },

    methods: {
      async getDataSource(more) {
        let userInfo = JSON.parse(localStorage.getItem('userInfo'));
        let res = await apiWorkList({
          currentPage: more ? this.currentPage : 1,
          pageSize: this.pageSize,
          createOrProcessorKey: userInfo.key,
          labelType: 1, //1-工作追踪 2-项目事件
          isLeader: this.isLeader,
          workTypeList: [3, 4, 5, 6],
          status: this.isLeader ? null : 1,
        });
        res.rows.forEach(item => {
          item.imgList = [];
          item.imageAttachmentList &&
            item.imageAttachmentList.forEach(img => {
              item.imgList.push(img.fileUrl);
            });
        });
        this.list = res.rows || [];
        this.total = res.total || 0;
      },

      //新建工作
      addEvent() {
        this.$refs.work.init();
      },

      //更新工作
      updateWork(model) {
        this.$refs.work.callBackFn(model);
      },

      //详情
      getInfo(key, model) {
        if (model && (model.status == 2 || !model.status)) {
          this.updateWork(model);
        } else {
          this.$refs.workInfo.getDataSource(key);
          this.$refs.workInfo.dialogShow = true;
        }
      },

      //添加编辑工作后刷新 key有值代表是编辑后的
      refresh(key) {
        this.getDataSource('more');
        key && this.$refs.workInfo.getDataSource(key);
      },

      //从首页滚动事件跳转过来
      hasInfoKeyDo() {
        if (this.$route.query.infoKey) {
          this.getInfo(this.$route.query.infoKey);
          this.$router.replace({
            query: merge(this.$route.query, { infoKey: '' }),
          });
        }
      },

      //分页
      pageChange(page) {
        this.currentPage = page.currentPage;
        this.getDataSource('more');
      },
    },

    components: { addWork, workItem, workInfo, optionList },
  };
</script>
<style lang="scss" scoped>
  .btn-box {
    top: -18px;
    right: 10px;
    z-index: 9999999999;
  }
  .tips {
    top: -50px;
    padding: 5px;
    border-radius: 10px;
    background: #ff3535;
    color: #fff;
    z-index: 99;
  }
  .tips-one {
    left: 124px;
  }
  .tips-two {
    left: 204px;
  }
  .tips-three {
    left: 284px;
  }
  .tag-orange-box {
    background: rgba(247, 145, 0, 0.1);
    border-radius: 3px;
    color: #f79100;
  }
  .tag-blue-box {
    background: rgba(51, 132, 254, 0.1);
    border-radius: 3px;
    color: #3384fe;
  }

  .border-line {
    border-bottom: 1px solid #e5e5e5;
  }
</style>
